<template>
  <div class="guarantee-case">
    <div class="title-wrap">
      <b class="title">{{data.title}}({{data.url}})</b>
      <span class="status2">{{data.statusText}}</span>
    </div>
    <div class="description">{{data.textCut}}</div>
    <el-row class="imgs-wrap">
      <el-col
        :span="6"
        v-for="(img, index) in data.imgs"
        :key="index"
      >
        <el-image
          :src="$baseImgUrl + img"
          :preview-src-list="data.imgs"
        ></el-image>
      </el-col>
    </el-row>
    <el-row class="bottom-wrap">
      <el-col :span="3">
        <i class="el-icon-chat-dot-square"></i>
        评论
        <span class="comments">{{data.commentsCount}}</span>
      </el-col>
      <el-col :span="3">
        <i class="el-icon-view"></i>
        评论
        <span class="comments">{{data.previewCount}}</span>
      </el-col>
      <el-col :span="6" :offset="12" class="create-date">{{data.createDate}}</el-col>
    </el-row>
    <div></div>
  </div>
</template>

<script>
export default {
  name: 'GuaurateeCase',
  props: {
    data: {
      type: Object,
      default() {
        return {
          title: '幸运彩票',
          url: 'http://h71588.com',
          statusText: '黑钱',
          textCut: '叫我充值10000  我没有这么多  充值了7000 输了2000  想提现5000  不给提现  说我有很多个账号  涉嫌套彩  我压根都没有怎么玩  就最近几天玩了  然后就要求我充值余额的2倍  解冻账号  充值了10000  流水打了45000  中途有段时间平台登陆不上  很确定不是网络问题  又以我银行卡绑定错误  要求我充值余额的3倍保证金才给我改银行卡  然后从冻结我账号以来，客服永远都以权限问题不给我处理  问他什么都叫我找我的导师',
          imgs: [
            'guauratee/case_img01.webp',
            'guauratee/case_img02.webp',
            'guauratee/case_img01.webp',
            'guauratee/case_img02.webp',
            'guauratee/case_img01.webp',
            'guauratee/case_img02.webp',
            'guauratee/case_img01.webp'
          ],
          commentsCount: 0,
          previewCount: 0,
          createDate: '2020-05-12'
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .guarantee-case {
    padding: 30px 0;
    border-bottom: 1px dashed #ddd;
    .title-wrap {
      margin: 0 0 10px 0;
      font-size: 24px;
      font-weight: 700;
      color: #33325c;
      .title {
        cursor: pointer;
      }
      span {
        margin-left: 10px;
        padding: 3px 15px;
        vertical-align: middle;
        font-weight: 400;
        font-size: 16px;
        border-radius: 15px;
        color: #fff;
        text-align: center;
        word-break: keep-all;
        &.status2 {
          background: #55a7ff;
        }
      }
    }
    .description {
      font-size: 14px;
      margin: 20px auto;
      color: #9ca6b7;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
    }
    .imgs-wrap {
      .el-col {
        padding: 5px;
        margin-bottom: 10px;
        .el-image {
          height: 100px;
        }
      }
    }
    .bottom-wrap {
      .el-icon-chat-dot-square {
        color: rgb(255, 153, 136);
      }
      .el-icon-view {
        color: rgb(191, 135, 255);
      }
      .create-date {
        text-align: right;
      }
    }
    &:last-child {
      border: 0;
    }
  }
</style>
